<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>卡片布局案例1</title>
		<style>
			/* css 样式思路
			1.通配选择器  微软雅黑  #f5f5f5 浅灰  外边距至0
			2.#product_card  边框  内边距  外边距  阴影【透明度.1】  文字居中
			3.img  边框倒角  内外边距？【微调】
			4.h3 颜色、内外边距【微调】
			5.p字体大小、颜色
			6.p+span：内外边距？【微调】 颜色
						 */
			div#product_card{
				width: 500px;
				height: 750px;
				background: #f5f5f5;
				margin: 0 auto;
				overflow: hidden;
			}
			div#d1{
				width: 420px;
				height: 650px;
				background: #ffffff;
				margin: 0 auto;
				margin-top: 50px;
				border: 1px solid #a9a9a9;
				border-radius: 5px;
				box-shadow: 1px 1px 5px 0 #bfbfbf;
			}
			img{
				width: 383px;
				height: 465px;
				padd ing: 10px 33px;
				border: 1px solid transparent;
				border-radius: 5px;
				margin-left: 20px;
				margin-top: 20px;
			}
			h3{
				text-align: center;
			}
			p#p1{
				font-size: 18px;
				color: #d90000;
				text-align: center;
			}
			p#p2{
				font-size: 11px;
				text-align: center;
			}
			span{
				color: #ef9f00;
				margin: 10px;
			}
		</style>
	</head>
	<body>
		<!-- 网页：1.html 结构【原生图分析】 -->
		<div id="product_card">
			<div id="d1">
			<img src="img/07a44452937db21955ee468552ec4bc.jpg" alt="su7">
			<h3>小米su7</h3>
			<p id="p1">￥279999.00</p >
			<p id="p2">已有<span>10万+</span>评价</p >
			</div>
		</div>
	</body>
</html>